<template>
	<el-dialog
		:title="$t('common.row_set')"
		:visible.sync="visible"
		width="475px"
		@close="onCancel"
	>
		<div v-for="col in columns" :key="col.prop" class="setting-div">
			<el-checkbox v-model="col.isShow">
				{{ col.label }}
			</el-checkbox>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="onCancel">
				{{ $t('common.cancel') }}
			</el-button>
			<el-button type="primary" @click="onOk">
				{{ $t('common.submit') }}
			</el-button>
		</div>
	</el-dialog>
</template>

<script>
export default {
	name: 'ColumnsSortDialog',
	props: {
		path: {
			type: String,
			default: ''
		},
		visible: Boolean,
		columns: {
			type: Array | Object,
			default: () => []
		}
	},
	created() {},
	methods: {
		onCancel() {
			this.$emit('update:visible', false)
		},
		onOk() {
			this.onCancel()
		}
	}
}
</script>

<style scoped>
.setting-div {
	margin-top: 10px;
}
</style>
